<template>
  <view class="all-artworks-list">
    <view class="artworks-list-item-container">
      <view
        v-for="(itemData, index) in artworksListData"
        :key="index"
        :class="'list-item-container' + ` list-item-container${currentArtworksType}`">
        <view
          v-for="(item, inde_) in itemData"
          :key="inde_"
          :class="'artworks-item' + ` artworks-item${type}`"
          @click="handleArtworks(item, inde_)">
          <block v-if="currentArtworksType != 9 && currentArtworksType != 11">
            <image
              v-if="type === 9"
              :lazy-load="true"
              :fade="false"
              :border-radius="16"
              :src="item.cover_url"
              :mode="type === 7 ? 'widthFix' : 'aspectFill'"
              :class="'image-cover' + ` image-cover${type}`">
            </image>
            <image
              v-else-if="type === 11"
              :lazy-load="true"
              :fade="false"
              :border-radius="16"
              :src="item.cover_url"
              :mode="type === 7 ? 'widthFix' : 'aspectFill'"
              :class="'image-cover' + ` image-cover${type}`">
            </image>
            <image
              v-else-if="type !== 4 && type !== 8"
              :lazy-load="true"
              :fade="false"
              :border-radius="16"
              :src="item.cover_url"
              :mode="type === 7 ? 'widthFix' : 'aspectFill'"
              :class="'image-cover' + ` image-cover${type}`">
            </image>
            <image
              v-else
              :lazy-load="true"
              :fade="false"
              :border-radius="16"
              :src="item.cover_url"
              :mode="type === 7 ? 'widthFix' : 'aspectFill'"
              :class="'image-cover' + ` image-cover${type}`">
            </image>
          </block>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    artworksList: {
      type: Array,
      default: () => {
        return []
      }
    },
    artworksType: {
      type: String,
      default: ''
    },
    avatar: {
      type: String,
      default: ''
    },
    artworksType: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      name: '列表',
      artworksListData: [],
      currentArtworksType: this.artworks_type,
      artworksHeight: 360,
      type: this.artworks_type
    }
  },
  watch: {
    artworksType: {
      immediate: true,
      handler(val) {
        this.currentArtworksType = val;
        this.type = val;
      }
    },
    artworksList: {
      immediate: true,
      handler(val) {
        if (val && val.length > 0) {
          const currentArtworksType = this.artworksType;
          this.artworksListData = [];
          let waterfallLeftListData = [];
          let waterfallCenterListData = [];
          let waterfallCenterListData2 = [];
          let waterfallRightListData = [];
          // 非头像
          if (currentArtworksType == 2) {
            val.forEach((item, index) => {
              if (index % 4 === 0) {
                waterfallLeftListData.push(item);
              } else if (index % 4 === 1) {
                waterfallCenterListData.push(item);
              } else if (index % 4 === 2) {
                waterfallCenterListData2.push(item);
              }  else if (index % 4 === 3) {
                waterfallRightListData.push(item);
              }
            });
            this.artworksListData.push(waterfallLeftListData);
            this.artworksListData.push(waterfallCenterListData);
            this.artworksListData.push(waterfallCenterListData2);
            this.artworksListData.push(waterfallRightListData);
          } else if (currentArtworksType == 9 || currentArtworksType == 11) {
            val.forEach(item => {
              waterfallLeftListData.push(item);
            });
            this.artworksListData.push(waterfallLeftListData);
          } else {
            val.forEach((item, index) => {
              if (index % 3 === 0) {
                waterfallLeftListData.push(item);
              } else if (index % 3 === 1) {
                waterfallCenterListData.push(item);
              } else if (index % 3 === 2) {
                waterfallRightListData.push(item);
              }
            });
            this.artworksListData.push(waterfallLeftListData);
            this.artworksListData.push(waterfallCenterListData);
            this.artworksListData.push(waterfallRightListData);
          }
        } else {
          this.artworksListData = [];
        }
      }
    }
  },
  methods: {
    handleArtworks(rowDta, index) {
      if (rowDta.audit_status === 'success') {
        this.$emit('handleArtworks', rowDta);
      } else if (rowDta.type === 9) {
        this.$emit('handleArtworks', rowDta);
      }
    },
  }
}
</script>

<style lang="scss">
  .artworks-list-item-container{
    display: flex;
    justify-content: space-between;

    .list-item-container{
      min-width: 32%;
      max-width: 32%;
    }

    .list-item-container9,
    .list-item-container11{
      min-width: 100%;
      max-width: 100%;
    }

    .artworks-item{
      width: 230rpx;
      margin-bottom: 12rpx;
      position: relative;
      border-radius: 16rpx;
      overflow: hidden;
      border: 2rpx solid #e7e5ef;

      .image-cover{
        width: 100%;
        max-height: 400rpx;
        min-height: 160rpx;
        float: left;
      }

      .image-cover1{
        height: 360rpx;
      }

      .image-cover2,
      .image-cover3{
        height: 230rpx;
      }

      .image-cover8,
      .image-cover6{
        height: 160rpx;
      }

      .play-icon{
        position: absolute;
        width: 60rpx;
        height: 60rpx;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        border-radius: 50%;
        background: rgba($color: #000000, $alpha: .5);
      }

      .show-status-container{
        background: rgba($color: #000000, $alpha: 0.6);
        color: #fff;
        width: 100%;
        height: 48rpx;
        z-index: 999;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;
        border-radius: 0 0 16rpx 16rpx;
      }

      .text-edit{
        text-align: center;
        width: 100%;
        height: 48rpx;
        line-height: 48rpx;
        position: absolute;
        font-size: 24rpx;
        left: 0;
        right: 0;
        bottom: 0;
        color: #fff;
        background: rgba($color: #000000, $alpha: .6);
        border-radius: 0 0 16rpx 16rpx;
      }

      .is_top{
        text-align: center;
        width: 70rpx;
        height: 36rpx;
        line-height: 36rpx;
        position: absolute;
        font-size: 24rpx;
        left: 0;
        top: 0;
        color: #fff;
        border-radius: 8rpx;
        background-color: $uni-color-primary2;
      }

      .artworks-item-content{
        padding: 24rpx;
        display: flex;
        align-items: center;
        background-color: #e0eefc;
      }
      
      .artworks-item-info{
        padding-left: 24rpx;
        padding-right: 12rpx;
        flex: 1;
      }
    }

    .artworks-item11{
      border: none;
      box-shadow: 0rpx 8rpx 10rpx 2rpx #EEEEF3;
    }

    .list-item-container2{
      min-width: 24%;
      max-width: 24%;

      .artworks-item2{
        height: 168rpx;
        width: 100%;
      }

      .image-cover2{
        height: 168rpx;
      }
    }

    // .artworks-item2:nth-child(4n),
    // .artworks-item2:nth-child(4n-1),
    // .artworks-item2:nth-child(4n-2) {
    //   margin: 0 0 0 2%;
    // }

    .artworks-item9,
    .artworks-item11{
      min-width: 100%;
      max-width: 100%;
    }

    .artworks-item11{
      margin-bottom: 24rpx;
    }

    .tool-name{
      width: 328rpx;
      font-size: 30rpx;
      font-weight: bold;
      color: #172B4D;
      margin-bottom: 24rpx;
      height: 36rpx;
      overflow:hidden; // 超出一行文字自动隐藏
      text-overflow:ellipsis; // 文字隐藏后添加省略号
      white-space:nowrap; // 强制不换行
    }

    .tool-desc{
      width: 320rpx;
      font-size: 22rpx;
      color: #6B778C;
      height: 36rpx;
      overflow:hidden; // 超出一行文字自动隐藏
      text-overflow:ellipsis; // 文字隐藏后添加省略号
      white-space:nowrap; // 强制不换行
    }

    .btn-container{
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      max-width: 136rpx;
      min-width: 136rpx;
      font-size: 24rpx;
      background: linear-gradient(118deg, #3DDCFF 0%, #A64EFF 100%);
      color: #fff;
      border-radius: 30rpx;
    }
  }

  .wechat-circle-container{
    padding: 24rpx;

    .author-avatar{
      width: 80rpx;
      height: 80rpx;
      border-radius: 8rpx;
    }

    .circle-content{
      margin-left: 24rpx;
      width: calc(100% - 104rpx);

      .circle-text{
        font-size: 28rpx;
        margin-bottom: 24rpx;
      }

      .image-list-content{
        width: 480rpx;
        margin-bottom: 24rpx;

        .image-item{
          width: 154rpx;
          height: 154rpx;
          margin-bottom: 8rpx;
        }

        .image-item:nth-child(3n - 1) {
          margin-left: 8rpx;
          margin-right: 8rpx;
        }
      }
    }
  }

</style>